<template>
  <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <swiper-slide class="first">
      <h2 :class="['animated',{'slideInDown':page1ClsObj.isSlideDown1}]"><div class="icon-logo"></div></h2>
      <p :class="['title','animated',{'slideInDown':page1ClsObj.isSlideDown2}]"><i class="icon-xiegang"></i><strong class="dao">导</strong><strong class="yan">眼</strong><i class="icon-xiegang"></i></p>
      <p :class="['desc','animated',{'slideInDown':page1ClsObj.isSlideDown3}]">探游目的地的每一个角落</p>
      <span :class="['t1','animated',{'bounceInDown':page1ClsObj.isBounceDown1}]"><i class="icon-site-big"></i></span>
      <span style="animation-delay:.2s"  :class="['t2','animated',{'bounceInDown':page1ClsObj.isBounceDown2}]"><i class="icon-site-small"></i></span>
      <span style="animation-delay:.4s"  :class="['t3','animated',{'bounceInDown':page1ClsObj.isBounceDown3}]"><i class="icon-site-small"></i></span>
      <span style="animation-delay:.6s"  :class="['t4','animated',{'bounceInDown':page1ClsObj.isBounceDown4}]"><i class="icon-site-small"></i></span>
      <span style="animation-delay:.8s"  :class="['t5','animated',{'bounceInDown':page1ClsObj.isBounceDown5}]"><i class="icon-site-small"></i></span>
    </swiper-slide>
    <swiper-slide class="second">
      <p :class="['title','animated',{'slideInDown':page2ClsObj.isSlideDown1}]"><i class="icon-xiegang"></i><strong>景</strong><strong class="qu">区</strong><strong class="dao">导</strong><strong class="hang">航</strong><i class="icon-xiegang"></i></p>
      <p :class="['desc','animated',{'slideInDown':page2ClsObj.isSlideDown2}]">带你玩转景区大小角落</p>
      <span  style="animation-delay:.2s" :class="['start','animated',{'zoomIn':page2ClsObj.isZoomIn1}]"><i class="icon-start-point"></i></span>
      <span style="animation-delay:1s" :class="['road','animated',{'fadeIn':page2ClsObj.isFadeIn}]"><i class="icon-road"></i></span>
      <span :class="['arrow',{'moving':page2ClsObj.isMoving}]"><i class="icon-arrow"></i><i class="twinkle"></i></span>
      <span style="animation-delay:.6s" :class="['end','animated',{'zoomIn':page2ClsObj.isZoomIn2}]"><i class="icon-end-point"></i></span>
    </swiper-slide>
    <swiper-slide class="third">
      <p :class="['title','animated',{'slideInDown':page3ClsObj.isSlideDown1}]"><i class="icon-xiegang"></i><strong>语</strong><strong class="qu">音</strong><strong class="dao">讲</strong><strong class="hang">解</strong><i class="icon-xiegang"></i></p>
      <p style="animation-delay:.2s" :class="['desc','animated',{'slideInDown':page3ClsObj.isSlideDown2}]">为你详细描述眼前的古往今来</p>
      <div style="animation-delay:.4s" :class="['sounds','animated',{'zoomIn':page3ClsObj.isZoomIn}]"></div>
    </swiper-slide>
    <swiper-slide class="fourth">
      <p :class="['title','animated',{'slideInDown':page4ClsObj.isSlideDown1}]"><i class="icon-xiegang"></i><strong>周</strong><strong class="qu">边</strong><strong class="dao">推</strong><strong class="hang">荐</strong><i class="icon-xiegang"></i></p>
      <p :class="['desc','animated',{'slideInDown':page4ClsObj.isSlideDown2}]">发现特色吃喝玩乐购</p>
      <div  style="animation-delay:0s" :class="['site1','animated',{'zoomIn':page4ClsObj.isZoomIn1}]"></div>
      <div  style="animation-delay:.2s" :class="['site2','animated',{'zoomIn':page4ClsObj.isZoomIn2}]"></div>
      <div  style="animation-delay:.4s" :class="['site3','animated',{'zoomIn':page4ClsObj.isZoomIn3}]"></div>
      <div  style="animation-delay:.6s" :class="['site4','animated',{'zoomIn':page4ClsObj.isZoomIn4}]"></div>
      <div  style="animation-delay:.8s" :class="['site5','animated',{'zoomIn':page4ClsObj.isZoomIn5}]"></div>
      <div  style="animation-delay:1s" :class="['site6','animated',{'zoomIn':page4ClsObj.isZoomIn6}]"></div>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
require('vue2-animate/dist/vue2-animate.min.css')

export default {
  name: 'guide',
  data () {
      return {
        show:true,
        notNextTick:true,
        timerArr:[],
        page1ClsObj:{
          isSlideDown1:false,
          isSlideDown2:false,
          isSlideDown3:false,
          isBounceDown1:false,
          isBounceDown2:false,
          isBounceDown3:false,
          isBounceDown4:false,
          isBounceDown5:false
        },
        page2ClsObj:{
          isSlideDown1:false,
          isSlideDown2:false,
          isZoomIn1:false,
          isZoomIn2:false,
          isFadeIn:false,
          isMoving:false
        },
        page3ClsObj:{
          isSlideDown1:false,
          isSlideDown2:false,
          isZoomIn:false
        },
        page4ClsObj:{
          isSlideDown1:false,
          isSlideDown2:false,
          isZoomIn1:false,
          isZoomIn2:false,
          isZoomIn3:false,
          isZoomIn4:false,
          isZoomIn5:false,
          isZoomIn6:false
        },
        swiperOption: {
          notNextTick: true,
          direction : 'vertical',
          grabCursor : true,
          setWrapperSize :true,
          autoHeight: true,
          paginationType:"bullets",
          pagination : '.swiper-pagination',
          mousewheelControl : true,
          observeParents:true,
          onInit: swiper => {
            this.doAnimate(this.page1ClsObj);
          },
          onSlideChangeEnd:swiper => {
            this.removePrevAnimateCls(swiper.previousIndex);
            this.setCurAnimateCls(swiper.activeIndex);
          }

        }
      }
  },
  methods: {
    setCurAnimateCls (activeIndex) {
      switch (activeIndex){
        case 0:
            this.doAnimate(this.page1ClsObj);
          break;
        case 1:
            this.doAnimate(this.page2ClsObj);
          break;
        case 2:
            this.doAnimate(this.page3ClsObj);
          break;
        case 3:
            this.doAnimate(this.page4ClsObj);
          break;
        default:
          break;
      }
    },
    removePrevAnimateCls (previousIndex) {
      switch (previousIndex){
        case 0:
          this.animateRemove(this.page1ClsObj); 
          break;
        case 1:
          this.animateRemove(this.page2ClsObj); 
          break;
        case 2:
          this.animateRemove(this.page3ClsObj); 
          break;
        case 3:
          this.animateRemove(this.page4ClsObj); 
          break;
        default:
          break;
      }
    },
    doAnimate (obj) {
      for(var attr in obj){
        obj[attr] = true;
      }
    },
    animateRemove (obj) {
      for(var attr in obj){
        obj[attr] = false;
      }
    }
  },
  mounted () {

  },
  components:{
    swiper,
    swiperSlide
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  @import "../scss/var";
  @import "../scss/mixin";
  @import "../scss/sprite";

  @mixin site-position($width,$height,$img){
    position:absolute;
    width:rem($width);
    height:rem($height);
    background:url($img) center;
    background-size:rem($width) rem($height);
  }

  .swiper-container{
    width:100%;
    height:100%;
    .swiper-slide.first{
      position:relative;
      background:url('../images/first_img_bg.jpg') no-repeat center;
      background-size:100% 100%;
      h2{
        width:100%;
        height:rem(140);
        position:relative;
        margin-top:rem(90);
        margin-bottom:rem(18);
        .icon-logo{
          width:rem(140);
          height:rem(140);
          border-radius:50%;
          background:#fff url("../images/logo.png") no-repeat center;
          background-size:rem(78) rem(92);
          left:50%;
          transform:translate3d(-50%,0,0);
          position:absolute;
        }
      }
      .title{
        width:100%;
        text-align:center;
        margin-bottom:rem(12);
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
        .dao,.yan{
          color:#fff;        
          font-size:rem(62);
        }
        .dao{
          margin:rem(0 18 0 24);
        }
        .yan{
          margin-right:rem(24);
        }
      }
      .desc{
        color:#fff;
        font-size:rem(32);
        letter-spacing:rem(10);
        text-align:center;
        text-shadow:0 rem(12) rem(20) rgba(0,129,120,0.4);
      }
      .icon-site-big{
        @extend .icon-site-big;
      }
      .icon-site-small{
        @extend .icon-site-small;
      }
      .t1{
        position:absolute;
        bottom:rem(444);
        right:rem(310);
      }
      .t2{
        position:absolute;
        right:rem(138);
        bottom:rem(412);
      }
      .t3{
        position:absolute;
        right:rem(34);
        bottom:rem(254);
      }
      .t4{
        position:absolute;
        right:rem(262);
        bottom:rem(132);
      }
      .t5{
        position:absolute;
        right:rem(140);
        bottom:rem(50);
      }

    }
    .swiper-slide.second{
      position:relative;
      background:url('../images/second_img_bg.jpg') no-repeat center;
      background-size:100% 100%;
      .title{
        margin-top:rem(64);
        margin-bottom:rem(12);
        font-size:rem(62);
        color:#fff;
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
        .qu{
          margin-left:rem(10);
        }
        .dao{
          margin:rem(0 10);
        }
        .icon-xiegang:nth-child(1),.hang{
          margin-right:rem(24);
        }
      }
      .desc{
        letter-spacing:rem(6);
        font-size:rem(30);
        color:#fff;
        text-align:center;
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
      }
      .start{
        position:absolute;
        left:rem(200);
        bottom:rem(298);
        z-index:10;
        .icon-start-point{
          @extend .icon-start-point;
        }
      }
      .road{
        position:absolute;
        right:rem(260);
        bottom:rem(356);
        .icon-road{
          @extend .icon-road;
        }
      }
      .arrow{
        position:absolute;
        z-index:10;
        left:rem(254);
        bottom:rem(364);  
        transform:translate(0, 0); 
        .icon-arrow{
          position:relative;
          @extend .icon-arrow;
          z-index:10;
        }
        .twinkle{
          display: block;
          position: absolute;
          left:-50%;
          top:-50%;
          border-radius: 50%;
          border: rem(50) solid #fff;
          opacity: 0;
          animation: ripple 1.2s ease-out 1575ms infinite;
          z-index:8;
        }
      }
      .moving {
        opacity:1;
        transform:translate(rem(88), rem(-84));
        transition: all 2.4s linear; 
        transition-delay:1.4s;
      }
      .end{
        position:absolute;
        right:rem(236);
        bottom:rem(580);
        .icon-end-point{
          @extend .icon-end-point;
        }
      }
    }
    .swiper-slide.third{
      position:relative;
      background:url('../images/third_img_bg.jpg') no-repeat center;
      background-size:100% 100%;
      .title{
        margin-top:rem(64);
        margin-bottom:rem(12);
        font-size:rem(62);
        color:#fff;
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
        .qu{
          margin-left:rem(10);
        }
        .dao{
          margin:rem(0 10);
        }
        .icon-xiegang:nth-child(1),.hang{
          margin-right:rem(24);
        }
      }
      .desc{
        letter-spacing:rem(6);
        font-size:rem(30);
        color:#fff;
        text-align:center;
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
      }
      .sounds{
        right:rem(50);
        bottom:rem(290);
        @include site-position(644,170,"../images/sound.png");
      }
    }
    .swiper-slide.fourth{
      position:relative;
      background:url('../images/fourth_img_bg.jpg') no-repeat center;
      background-size:100% 100%;
      .title{
        margin-top:rem(54);
        margin-bottom:rem(12);
        font-size:rem(62);
        color:#fff;
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
        .qu{
          margin-left:rem(10);
        }
        .dao{
          margin:rem(0 10);
        }
        .icon-xiegang:nth-child(1),.hang{
          margin-right:rem(24);
        }
      }
      .desc{
        letter-spacing:rem(6);
        font-size:rem(30);
        color:#fff;
        text-align:center;
        text-shadow:0 rem(12) rem(30) rgba(0,129,120,0.5);
      }
      .site1{
        left:rem(30);
        top:rem(350);
        @include site-position(214,214,"../images/around.png");  
        
      }
      .site2{
        @include site-position(214,236,"../images/mall.png");
        right:rem(218);
        top:rem(530);
      }
      .site3{
        z-index:10;
        @include site-position(218,248,"../images/eat2.png");
        left:rem(118);
        bottom:rem(386);
      }
      .site4{
        @include site-position(126,150,"../images/hotel.png");
        left:rem(268);
        bottom:rem(430);
      }
      .site5{
        @include site-position(188,206,"../images/eat.png");
        right:rem(182);
        bottom:rem(322);
      }
      .site6{
        @include site-position(118,128,"../images/site.png");
        right:rem(352);
        bottom:rem(180);
      }

    }
    .swiper-pagination-bullets{
      width:rem(20);
      right:rem(28);
      .swiper-pagination-bullet{
        width:rem(14);
        height:rem(14);
        border-radius:50%;
        margin-top:rem(14);
        margin-bottom:rem(14);
      }
      .swiper-pagination-bullet-active{
        background:#fff;
      }
    }
    
  }

  .fadeIn {
    animation-name: fadeIn ;
    animation-duration: 2s;//动画执行时间
  }
  @keyframes ripple {
      0% {
          opacity: 0;
          -webkit-transform: scale(.1);
          transform: scale(.1)
      }

      15% {
          opacity: 1
      }

      to {
          opacity: 0;
          -webkit-transform: scale(1.2);
          transform: scale(1.2)
      }
  }
  
</style>
